<template>
	<view class="mood-select-page">
		<view class="page-title">你现在想？</view>
		
		<view class="mood-grid">
			<view 
				v-for="mood in moodList" 
				:key="mood.id"
				class="mood-card"
				@click="navigateToAudio(mood.id)"
				:style="{ 
					'--active-shadow': `0 0 25rpx ${mood.color}B3, 0 4rpx 10rpx rgba(0, 0, 0, 0.15)`
				}"
			>
				<view 
					class="mood-icon"
					:style="{ 
						backgroundColor: `${mood.color}33`, 
						boxShadow: `0 0 15rpx ${mood.color}66`  
					}"
				>
					<image class="iconfont" :src="mood.icon"></image>
				</view>
				<view class="mood-name">{{ mood.name }}</view>
				
				<view 
					class="mood-indicator"
					:style="{ backgroundColor: mood.color }"
				></view>
			</view>
		</view>
	</view>
</template>

<script>
import { moodSceneList } from '../../api/User';
	export default {
		data() {
			return {
				moodList: []
			};
		},
		onShow() {
			this.getMoodSceneList()
		},
		methods: {
			async getMoodSceneList() {
				const res = await moodSceneList()
				console.log(res)
				this.moodList=res.data
			},
			navigateToAudio(moodId) {
				const selectedMood = this.moodList.find(mood => mood.id === moodId);
				uni.navigateTo({
					url: `/pages/service/service?moodId=${moodId}&moodColor=${selectedMood.color}&moodName=${selectedMood.name}&moodIcon=${selectedMood.iconCode}`
				});
			},
			navigateToCollection() {
				uni.navigateTo({
					url: '/pages/collection/collection'
				});
			}
		}
	};
</script>

<style scoped>
	.mood-select-page {
		padding: 60rpx 30rpx 100rpx;
		min-height: 100vh;
		background-image: url("https://hjyqyh.oss-cn-beijing.aliyuncs.com/whitenoise/backgroundImg/backgroundImg.png");
		background-size: cover;
		background-position: center;
		background-attachment: fixed;
		position: relative;
		overflow: hidden;
	}
	
	.mood-select-page::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.2);
		z-index: 0;
	}
	
	.page-title {
		font-size: 42rpx;
		font-weight: 700;
		color: #FFFFFF;
		margin-bottom: 60rpx;
		text-align: center;
		letter-spacing: 3rpx;
		position: relative;
		z-index: 1;
		text-shadow: 0 0 15rpx rgba(255, 255, 255, 0.5);
	}
	
	.mood-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 40rpx;
		position: relative;
		z-index: 1;
	}
	
	.mood-card {
		background-color: rgba(255, 255, 255, 0.25);
		border-radius: 24rpx;
		padding: 45rpx 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		box-shadow: 0 6rpx 15rpx rgba(0, 0, 0, 0.1);
		transition: all 0.3s ease;
		position: relative;
		overflow: hidden;
		backdrop-filter: blur(12rpx);
		border: 1rpx solid rgba(255, 255, 255, 0.3);
	}
	
	/* 卡片点击效果：使用CSS变量接收动态阴影 */
	.mood-card:active {
		transform: scale(0.96);
		background-color: rgba(255, 255, 255, 0.35);
		box-shadow: var(--active-shadow);
	}
	
	.mood-icon {
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.iconfont {
		font-size: 55rpx;
		color: #FFFFFF;
		text-shadow: 0 0 10rpx rgba(255, 255, 255, 0.6);
	}
	
	.mood-name {
		font-size: 34rpx;
		color: #FFFFFF;
		font-weight: 500;
		text-shadow: 0 0 8rpx rgba(0, 0, 0, 0.2);
	}
	
	.mood-indicator {
		width: 100%;
		height: 8rpx;
		position: absolute;
		bottom: 0;
		left: 0;
		opacity: 0.8;
	}

	/* 移除所有硬编码的颜色类名（不再需要） */
</style>
